<template>
  <div>
    <div>
      <input
        class="docSearchInput"
        @confirm="changeList"
        type="text"
        v-model="listData.searchVal"
      />
    </div>
    <Tabs @click="changeList"></Tabs>
    <div :style="{ height: `${height - 180}px`, overflow: 'auto' }">
      <mp-loading v-if="listLoading" type="circle" :tips="djts[Math.floor(Math.random() * 4)]"></mp-loading>
      <div class="px-6 pt-4" v-for="(item, index) in list" :key="index">
        <ListLabel @click.native="labelIndex = index" :class="labelIndex === index ? 'docSelect' : ''" :source="listData.source" :index="index" :item="item"></ListLabel>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Vue from 'vue'
import Footer from '@/components/Footer.vue'
import Tabs from '@/components/Tabs.vue'
import ListLabel from '@/components/ListLabel.vue'
import { api } from '@/api/index.js'

export default Vue.extend({
  components: {
    Footer, Tabs, ListLabel
  },
  data: () => ({
    height: 800,
    listLoading: true,
    list: [],
    listData: {
      searchVal: '像我这样的人',
      source: 'netease'
    },
    djts: [
      '左滑可以下载音乐~',
      '钱不是问题, 问题是没钱',
      '2021, 扬帆起航',
      '努力不一定有用, 但不努力一定很舒服'
    ],
    labelIndex: undefined
  }),
  created() {
    const _this = this
    this.getListData()
    wx.getSystemInfo({
      success(res) {
        _this.height = res.windowHeight
      },
    })
  },
  methods: {
    getListData() {
      this.listLoading = true
      api({
        types: 'search',
        count: 20,
        pages: 1,
        source: this.listData.source,
        name: this.listData.searchVal,
      }).then((data) => {
        this.list = data
        this.listLoading = false
      })
    },
    changeList(value, type) {
      if (type === 'source') {
        this.listData.source = value
      }
      this.labelIndex = undefined
      this.list = []
      this.getListData()
    }
  }
})
</script>
